<template>
  <div class="addGood">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-alert
          title="添加商品信息"
          type="info"
          center
          :closable="false"
          show-icon>
      </el-alert>
      <div>
        <el-steps :active="active" finish-status="success">
          <el-step title="基本信息"></el-step>
          <el-step title="商品参数"></el-step>
          <el-step title="商品属性"></el-step>
          <el-step title="商品照片"></el-step>
          <el-step title="商品内容"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
      </div>
      <div>
        <el-tabs v-model="activea"  @tab-click="fn" tab-position="left" >
          <el-tab-pane  label="基本信息" name="1">
            <div>
              <el-form :model="ruleForm" :required="true" status-icon :rules="rules" ref="ruleForm" label-position="top" label-width="100px" class="demo-ruleForm">
                <el-form-item  label="商品名称" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="商品价格" prop="price">
                  <el-input type="number" v-model="ruleForm.price"></el-input>
                </el-form-item>
                <el-form-item label="商品数量" prop="amount">
                  <el-input type="number" v-model="ruleForm.amount"></el-input>
                </el-form-item>
                <el-form-item label="商品重量" prop="weight">
                  <el-input type="number" v-model="ruleForm.weight"></el-input>
                </el-form-item>
                <el-form-item label="分类">
                  <el-cascader
                      :options="options"
                      :props="defaultParams"
                      :show-all-levels="false"
                      v-model="cat"
                      clearable></el-cascader>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="商品参数" name="2"></el-tab-pane>
          <el-tab-pane label="商品属性" name="3"></el-tab-pane>
          <el-tab-pane label="商品照片" name="4">
            <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-tab-pane>
          <el-tab-pane label="商品内容" name="5">
            <div class="edit_container" style="height: 400px">
              <quill-editor
                  v-model="content"
                  ref="myQuillEditor"
                  style="height: 300px"

                  @change="handleChangex"
                  :options="editorOption">
              </quill-editor>
            </div>
            <el-button size="small" type="primary" @click="addGood">添加商品</el-button>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

export default {
  name: "addGoodView",
  data() {
    return {
      ruleForm: {
        name: '',
        price:0,
        amount:0,
        weight:0
      },
      rules: {
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        price:[{
          required: true,
        }],
        amount:[{
          required: true,
        }],
        weight:[{
          required: true,
        }]
      },
      active: 0,
      activea:"1",
      value: [],
      options:[],
      defaultParams: {
        checkStrictly: true,
        expandTrigger: 'hover',
        label: "cat_name",
        value: "cat_name",
        children: "children",
      },
      fileList:[],
      content: "",
      editorOption: {},
      cat:[]
    }
  },
  methods: {
    fn(a){
      this.active = Number(a.index)
    },
    handleChange(value) {
      console.log(value);
    },
    handleChangex(a){
      console.log(a)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    async addGood(){
      let obj = {
        goods_name:this.ruleForm.name,
        goods_cat:"1,2,3",
        goods_price:Number(this.ruleForm.price) ,
        goods_number:Number(this.ruleForm.amount),
        goods_weight:Number(this.ruleForm.weight)
      }
      let res = await this.$http.postGoods(obj)
      console.log(res,obj)
      if(res.data.meta.status=="201"){
        console.log(123)
        this.$router.push("/home/oms/order")
        this.$message({
          message: '添加成功',
          type: 'success'
        });
      }else{
        this.$message.error('添加失败');
      }
    },
  },
  async created (){
    let res = await this.$http.getCate()
    this.options=res.data.data
    console.log(res)
  },
  components: {

    quillEditor

  },
}
</script>

<style scoped lang="scss">
  .addGood {
    color: #333;
    width: 92vw;
    height: 89vh;
    overflow-y: auto;
    padding: 20px;
    .el-card {
      margin-top: 10px;
      width:95%;
    .el-card__body {
      padding: 20px;
    }
      .el-table .el-table__cell {
        font-size: 12px;
        padding: 10px 0
      }
    }


  }
</style>